<template>
  <TopNav title="库存管理"/>
  <div class="container">
    <!--产品列表 start-->
    <div class="product-list">
      <div class="product-item" v-for="(item,index) in dataList.list" :key="index">
        <div class="top">
          <div class="left">
            <img :src="item.headImg">
          </div>
          <div class="right">
            <h1>{{ item.name }}</h1>
            <p>库存{{ item.stock }}</p>
          </div>
        </div>
        <div class="bottom">
          <el-button v-if="item.stock<100" type="warning" round size="small">库存不足，请及时补货</el-button>
          <el-button v-if="item.stock>=100" type="success" round size="small">库存充足</el-button>
        </div>
      </div>
    </div>
    <!--产品列表 end-->
  </div>
</template>

<script setup>
import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import repositoryAxios from "@/api/repository.js"
import {onMounted, reactive, ref} from "vue";
import sysAxios from '@/api/sys.js'

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  headImg: "",
  name: "",
  price: "",
  proteinContent: "",
  carbohydrateContent: "",
  fatContent: "",
  expiryTime: "",
  stock: "",
  description: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  nutritionProductId: '',
  headImg: "",
  name: "",
  price: "",
  proteinContent: "",
  carbohydrateContent: "",
  fatContent: "",
  expiryTime: "",
  stock: "",
  description: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = () => {
  repositoryAxios.nutritionProduct_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
onMounted(() => {
  http()
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  currentPage.value = nowPage
  http()
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http()
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 上传成功的钩子
 */
const onHeadImageAddSuccess = (response, uploadFile) => {
  addFormInfo.headImg = response.data
  ElMessage.success("上传成功")
}
/**
 * 移除图片的钩子
 */
const onHeadImageAddRemove = (response, uploadFile) => {
  sysAxios.fastdfs_delete({
    filePath: addFormInfo.headImg
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  repositoryAxios.nutritionProduct_add({
    headImg: addFormInfo.headImg,
    name: addFormInfo.name,
    price: addFormInfo.price,
    proteinContent: addFormInfo.proteinContent,
    carbohydrateContent: addFormInfo.carbohydrateContent,
    fatContent: addFormInfo.fatContent,
    expiryTime: addFormInfo.expiryTime,
    stock: addFormInfo.stock,
    description: addFormInfo.description,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}

/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {
  dialogEditorVisible.value = true
  repositoryAxios.nutritionProduct_findById({
    nutritionProductId: row.nutritionProductId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.nutritionProductId = res.data.data.nutritionProductId;
      editorFormInfo.headImg = res.data.data.headImg;
      editorFormInfo.name = res.data.data.name;
      editorFormInfo.price = res.data.data.price;
      editorFormInfo.proteinContent = res.data.data.proteinContent;
      editorFormInfo.carbohydrateContent = res.data.data.carbohydrateContent;
      editorFormInfo.fatContent = res.data.data.fatContent;
      editorFormInfo.expiryTime = res.data.data.expiryTime;
      editorFormInfo.stock = res.data.data.stock;
      editorFormInfo.description = res.data.data.description;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })
}

/**
 * 封面上传成功的钩子
 */
const onHeadImageEditSuccess = (response, uploadFile) => {
  //删除以前图片
  sysAxios.fastdfs_delete({
    filePath: editorFormInfo.headImg
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("fastdfs移除原图片成功")
    }
  })
  //替换为现在的图片
  editorFormInfo.headImg = response.data
  ElMessage.success("上传成功")

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  repositoryAxios.nutritionProduct_update({
    nutritionProductId: editorFormInfo.nutritionProductId,
    headImg: editorFormInfo.headImg,
    name: editorFormInfo.name,
    price: editorFormInfo.price,
    proteinContent: editorFormInfo.proteinContent,
    carbohydrateContent: editorFormInfo.carbohydrateContent,
    fatContent: editorFormInfo.fatContent,
    expiryTime: editorFormInfo.expiryTime,
    stock: editorFormInfo.stock,
    description: editorFormInfo.description,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    repositoryAxios.nutritionProduct_delete({
      nutritionProductId: row.nutritionProductId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        http()
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })
}

</script>

<style scoped lang="scss">
.product-list {
  .product-item {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;

    .top {
      display: flex;

      .left {
        img {
          border-radius: 10px;
          width: 80px;
          height: 80px;
        }
      }

      .right {
        margin-left: 10px;

        h1 {
          margin-bottom: 10px;
          font-weight: bolder;
          font-family: 楷体;
        }

        p {
          font-size: 12px;
          opacity: .7;
        }
      }
    }

  }
}
</style>
